<template>
  <div class="movie-detail-bg">
    <div class="movie-detail-container">
      <button @click="goBack" class="back-button">
        <svg class="back-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M13 16l-5-5 5-5" stroke="#1976d2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        返回电影列表
      </button>
      <div v-if="loading" class="loading-message">加载中...</div>
      <div v-else-if="error" class="error-message">{{ error }}</div>
      <div v-else-if="!movie" class="no-data-message">未找到电影详情。</div>
      <div v-else class="movie-content">
        <h1 class="movie-title">
          <span class="movie-title-gradient">{{ movie.title }}</span>
        </h1>
        <div class="movie-header">
          <img :src="movie.imageUrl" :alt="movie.title" class="movie-image" />
          <div class="movie-meta">
            <p><strong>演员</strong>：{{ movie.actors }}</p>
            <p><strong>发布时间</strong>：{{ formatTime(movie.addTime) }}</p>
            <p><strong>作者</strong>：{{ movie.authorName }}</p>
            <p><strong>分类ID</strong>：{{ movie.categoryId }}</p>
            <p><strong>用户ID</strong>：{{ movie.userId }}</p>
            <a :href="movie.playUrl" target="_blank" class="play-button">
              <svg class="play-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#fff"/><polygon points="8,6 15,10 8,14" fill="#42b983"/></svg>
              立即播放
            </a>
          </div>
        </div>
        <div class="movie-description-full">
          <h2>电影简介</h2>
          <p>{{ movie.description }}</p>
        </div>
        <!-- 评论区 -->
        <div class="comment-section">
          <h3>发表评论</h3>
          <textarea
            v-model="commentBody"
            placeholder="写下你的评论..."
            rows="5"
            class="comment-textarea"
          ></textarea>
          <button @click="submitComment" class="submit-comment-button">
            <svg class="send-icon" width="18" height="18" viewBox="0 0 20 20" fill="none"><path d="M2 10L18 3L11 18L9 11L2 10Z" fill="#fff"/></svg>
            提交评论
          </button>
          <p v-if="commentMessage" :class="{'success-message': commentSuccess, 'error-message': !commentSuccess}">{{ commentMessage }}</p>
          <h3 class="comments-title">评论列表</h3>
          <div v-if="commentsLoading" class="loading-message">评论加载中...</div>
          <div v-else-if="commentsError" class="error-message">{{ commentsError }}</div>
          <div v-else-if="comments.length === 0" class="no-data-message">暂无评论。</div>
          <div v-else class="comments-list">
            <div v-for="comment in comments" :key="comment.id" class="comment-item">
              <p class="comment-meta">
                <span class="comment-author">
                  <svg class="user-icon" width="16" height="16" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="7" r="4" fill="#42b983"/><ellipse cx="10" cy="15" rx="7" ry="4" fill="#b2ebf2"/></svg>
                  {{ comment.userName || '匿名用户' }}
                </span>
                <span class="comment-date">
                  <svg class="clock-icon" width="14" height="14" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#90caf9" stroke-width="2"/><path d="M10 5v5l3 2" stroke="#1976d2" stroke-width="2" stroke-linecap="round"/></svg>
                  {{ formatTime(comment.addedTime) }}
                </span>
              </p>
              <p class="comment-body">{{ comment.body }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { useUserStore } from '@/stores/user';

interface MovieDetail {
  id: number;
  title: string;
  actors: string;
  imageUrl: string;
  playUrl: string;
  addTime: string;
  userId: number | null;
  description: string;
  categoryId: number | null;
  authorName: string;
}

interface Comment {
  id: number;
  articleId: number;
  body: string;
  userId: number;
  userName: string;
  addedTime: string;
  replyType: string;
  typeIndex: number;
}

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const movie = ref<MovieDetail | null>(null);
const loading = ref(true);
const error = ref<string | null>(null);
const commentBody = ref('');
const commentMessage = ref<string | null>(null);
const commentSuccess = ref(false);
const comments = ref<Comment[]>([]);
const commentsLoading = ref(true);
const commentsError = ref<string | null>(null);

const fetchMovieDetail = async () => {
  const movieId = route.params.id;
  if (!movieId) {
    error.value = '电影ID缺失。';
    loading.value = false;
    return;
  }
  loading.value = true;
  error.value = null;
  try {
    const response = await axios.get(`/api/demo/getsingle?id=${movieId}&typeIndex=3`);
    if (response.data) {
      movie.value = {
        id: response.data.id,
        title: response.data.title,
        actors: response.data.actors,
        imageUrl: response.data.picPaths,
        playUrl: response.data.playUrl,
        addTime: response.data.addedTime,
        userId: response.data.userid,
        description: response.data.desc,
        categoryId: response.data.categoryid,
        authorName: response.data.authorName,
      };
    } else {
      error.value = '未找到电影详情。';
    }
  } catch (err) {
    console.error('获取电影详情失败:', err);
    error.value = '无法加载电影详情。请稍后再试。';
  } finally {
    loading.value = false;
  }
};

const fetchComments = async () => {
  const movieId = route.params.id;
  if (!movieId) {
    commentsError.value = '电影ID缺失，无法加载评论。';
    commentsLoading.value = false;
    return;
  }
  commentsLoading.value = true;
  commentsError.value = null;
  try {
    const response = await axios.get(`/api/demo/getallitems?articleid=${movieId}&typeIndex=4&replyType=电影`);
    if (response.data && Array.isArray(response.data)) {
      comments.value = response.data.map((item: any) => ({
        id: item.id,
        articleId: item.articleid,
        body: item.body,
        userId: item.userid,
        userName: item.authorName || '匿名用户',
        addedTime: item.addedTime,
        replyType: item.replyType,
        typeIndex: item.typeIndex,
      }));
    } else {
      comments.value = [];
    }
  } catch (err) {
    console.error('获取评论失败:', err);
    commentsError.value = '无法加载评论。请稍后再试。';
  } finally {
    commentsLoading.value = false;
  }
};

const submitComment = async () => {
  if (!commentBody.value.trim()) {
    commentMessage.value = '评论内容不能为空。';
    commentSuccess.value = false;
    return;
  }
  if (!userStore.currentUserId) {
    commentMessage.value = '请先登录才能发表评论。';
    commentSuccess.value = false;
    return;
  }
  if (!movie.value || !movie.value.id) {
    commentMessage.value = '无法获取电影ID，请刷新页面重试。';
    commentSuccess.value = false;
    return;
  }
  try {
    const response = await axios.post('/api/demo/additem', {
      articleid: movie.value.id,
      body: commentBody.value.trim(),
      userid: userStore.currentUserId,
      replyType: '电影',
      typeIndex: 4,
    });
    if (response.data && response.data.id) {
      commentMessage.value = '评论提交成功！';
      commentSuccess.value = true;
      commentBody.value = '';
      fetchComments();
    } else {
      commentMessage.value = response.data.message || '评论提交失败。';
      commentSuccess.value = false;
    }
  } catch (err) {
    console.error('提交评论失败:', err);
    commentMessage.value = '提交评论时发生错误。请稍后再试。';
    commentSuccess.value = false;
  }
};

const formatTime = (timeString: string) => {
  if (!timeString) return '';
  const date = new Date(timeString);
  return date.toLocaleString();
};

const goBack = () => {
  router.push('/movies');
};

onMounted(() => {
  fetchMovieDetail();
  fetchComments();
});
</script>

<style scoped>
/* 新美化样式 */
.movie-detail-bg {
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(120deg, #e0eafc 0%, #cfdef3 60%, #b2ebf2 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
}
.movie-detail-container {
  padding: 44px 38px 38px 38px;
  width: 1000px;
  margin: 56px auto 36px auto;
  font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
  color: #333;
  background: rgba(255,255,255,0.99);
  border-radius: 28px;
  box-shadow: 0 12px 40px 0 rgba(60, 80, 120, 0.16), 0 1.5px 8px 0 rgba(66,185,131,0.08);
  position: relative;
  overflow: visible;
  min-width: 320px;
}
.back-button {
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px 10px 16px;
  background: linear-gradient(90deg, #b2ebf2 0%, #90caf9 100%);
  color: #1976d2;
  border: none;
  border-radius: 22px;
  cursor: pointer;
  font-size: 1.08em;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 2px 10px rgba(25, 118, 210, 0.09);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.18s;
  z-index: 10;
  outline: none;
}
.back-icon {
  margin-right: 2px;
  vertical-align: middle;
}
.back-button:hover {
  background: linear-gradient(90deg, #90caf9 0%, #b2ebf2 100%);
  color: #1565c0;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 6px 18px rgba(25, 118, 210, 0.13);
}
.back-button:active {
  transform: translateY(0) scale(1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.movie-title {
  font-size: 3.2em;
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  letter-spacing: 0.5px;
  border-bottom: none;
}
.movie-title-gradient {
  background: linear-gradient(90deg, #42b983 10%, #1976d2 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 1px 1px 8px rgba(66,185,131,0.08);
}
.movie-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  background: linear-gradient(90deg, #f8fafc 60%, #e3f2fd 100%);
  padding: 36px 30px 30px 30px;
  border-radius: 18px;
  box-shadow: 0 5px 18px rgba(66,185,131,0.07), 0 1.5px 8px 0 rgba(66,185,131,0.04);
}
.movie-image {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(66,185,131,0.13), 0 2px 8px rgba(25, 118, 210, 0.08);
  transition: transform 0.4s, box-shadow 0.4s;
}
.movie-image:hover {
  transform: scale(1.04);
  box-shadow: 0 16px 36px rgba(66,185,131,0.18), 0 4px 16px rgba(25, 118, 210, 0.13);
}
.movie-meta {
  text-align: center;
  font-size: 1.18em;
  line-height: 2.1;
}
.movie-meta p {
  margin: 10px 0;
  color: #4a4a4a;
}
.movie-meta strong {
  color: #1976d2;
  font-weight: 700;
}
.play-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 25px;
  padding: 15px 35px;
  background: linear-gradient(90deg, #42b983 60%, #90caf9 100%);
  color: white;
  text-decoration: none;
  border-radius: 30px;
  font-size: 1.3em;
  font-weight: bold;
  transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
  box-shadow: 0 6px 15px rgba(66,185,131,0.13);
  border: none;
  outline: none;
}
.play-icon {
  margin-right: 2px;
}
.play-button:hover {
  background: linear-gradient(90deg, #369f75 60%, #1976d2 100%);
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 10px 24px rgba(66,185,131,0.18);
}
.play-button:active {
  transform: translateY(0) scale(1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}
.movie-description-full {
  background: linear-gradient(90deg, #fff 80%, #e3f2fd 100%);
  padding: 32px 30px 30px 30px;
  border-radius: 16px;
  box-shadow: 0 5px 15px rgba(66,185,131,0.07);
}
.movie-description-full h2 {
  font-size: 2.2em;
  color: #1976d2;
  margin-bottom: 20px;
  border-bottom: 2px solid #42b983;
  padding-bottom: 10px;
  background: linear-gradient(90deg, #42b983 10%, #90caf9 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.movie-description-full p {
  line-height: 1.8;
  color: #444;
  font-size: 1.13em;
}
.comment-section {
  margin-top: 44px;
  background: linear-gradient(90deg, #fff 80%, #e3f2fd 100%);
  padding: 32px 30px 30px 30px;
  border-radius: 18px;
  box-shadow: 0 5px 18px rgba(66,185,131,0.07);
}
.comment-section h3 {
  font-size: 2em;
  color: #1976d2;
  margin-bottom: 25px;
  border-bottom: 1.5px solid #42b983;
  padding-bottom: 10px;
  background: linear-gradient(90deg, #42b983 10%, #90caf9 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.comment-textarea {
  width: calc(100% - 28px);
  padding: 18px;
  margin-bottom: 22px;
  border: 1.5px solid #b2ebf2;
  border-radius: 14px;
  font-family: inherit;
  font-size: 1.13em;
  resize: vertical;
  min-height: 120px;
  box-shadow: 0 1.5px 8px 0 rgba(66,185,131,0.06) inset;
  transition: border 0.2s, box-shadow 0.2s;
}
.comment-textarea:focus {
  border-color: #42b983;
  outline: none;
  box-shadow: 0 1.5px 8px 0 rgba(66,185,131,0.13) inset, 0 0 8px rgba(66,185,131,0.13);
}
.submit-comment-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 32px;
  background: linear-gradient(90deg, #1976d2 60%, #42b983 100%);
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1.18em;
  font-weight: bold;
  transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
  box-shadow: 0 5px 15px rgba(25, 118, 210, 0.13);
  outline: none;
}
.send-icon {
  margin-right: 2px;
}
.submit-comment-button:hover {
  background: linear-gradient(90deg, #42b983 60%, #1976d2 100%);
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 7px 20px rgba(66,185,131,0.18);
}
.submit-comment-button:active {
  transform: translateY(0) scale(1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.comment-item {
  background: linear-gradient(90deg, #f0f2f5 80%, #e3f2fd 100%);
  padding: 25px 22px 22px 22px;
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(66,185,131,0.06);
  transition: background 0.3s, box-shadow 0.3s;
}
.comment-item:hover {
  background: linear-gradient(90deg, #e6e8eb 80%, #b2ebf2 100%);
  box-shadow: 0 5px 15px rgba(66,185,131,0.13);
}
.comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1em;
  color: #777;
  margin-bottom: 12px;
  border-bottom: 1px dashed #b2ebf2;
  padding-bottom: 8px;
  gap: 10px;
}
.comment-author {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: bold;
  color: #42b983;
}
.user-icon {
  vertical-align: middle;
}
.comment-date {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #1976d2;
  font-size: 0.98em;
}
.clock-icon {
  vertical-align: middle;
}
.comment-body {
  font-size: 1.13em;
  color: #444;
  line-height: 1.7;
  margin-top: 6px;
}
@media (min-width: 768px) {
  .movie-header {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 48px;
  }
  .movie-image {
    margin-right: 48px;
  }
  .movie-meta {
    text-align: left;
  }
}
@media (max-width: 767px) {
  .movie-title {
    font-size: 2.2em;
  }
  .movie-detail-container {
    padding: 16px;
    margin: 16px auto;
  }
  .movie-image {
    max-width: 220px;
  }
  .play-button,
  .submit-comment-button {
    padding: 10px 18px;
    font-size: 1em;
  }
  .back-button {
    top: 12px;
    left: 12px;
    padding: 8px 10px;
    font-size: 0.85em;
  }
  .movie-content {
    padding-top: 36px;
  }
  .comment-textarea {
    width: calc(100% - 16px);
    min-height: 80px;
  }
  .movie-header, .movie-description-full, .comment-section {
    padding: 14px;
  }
}
@media (max-width: 480px) {
  .movie-title {
    font-size: 1.3em;
  }
  .movie-detail-container {
    padding: 8px;
    margin: 8px auto;
  }
  .movie-image {
    max-width: 120px;
  }
  .play-button,
  .submit-comment-button {
    padding: 7px 10px;
    font-size: 0.9em;
  }
  .back-button {
    top: 6px;
    left: 6px;
    padding: 5px 7px;
    font-size: 0.7em;
  }
  .movie-content {
    padding-top: 18px;
  }
  .movie-header, .movie-description-full, .comment-section {
    padding: 7px;
  }
  .comment-textarea {
    min-height: 60px;
  }
}

.loading-message,
.error-message,
.no-data-message {
  text-align: center;
  font-size: 1.3em; /* 增加字体大小 */
  color: #666;
  margin-top: 60px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.error-message {
  color: #e74c3c;
  font-weight: bold;
}

.movie-content {
  display: flex;
  flex-direction: column;
  gap: 30px; /* 增加间距 */
  padding-top: 60px; /* 为返回按钮留出更多空间 */
}

.movie-title {
  font-size: 3.2em; /* 增加字体大小 */
  color: #2c3e50;
  text-align: center;
  margin-bottom: 30px;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.18); /* 调整阴影 */
  border-bottom: 4px solid #42b983; /* 调整边框 */
  padding-bottom: 15px;
  letter-spacing: 0.5px; /* 增加字间距 */
}

.movie-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px; /* 增加间距 */
  background-color: #ffffff; /* 更改背景色 */
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* 调整阴影 */
}

.movie-image {
  width: 100%;
  max-width: 400px; /* 增加最大宽度 */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); /* 调整阴影 */
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.movie-image:hover {
  transform: scale(1.03); /* 增加缩放效果 */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.movie-meta {
  text-align: center;
  font-size: 1.15em; /* 增加字体大小 */
  line-height: 1.9;
}

.movie-meta p {
  margin: 10px 0;
  color: #555;
}

.movie-meta strong {
  color: #333;
  font-weight: 700; /* 增加字体粗细 */
}

.play-button {
  display: inline-block;
  margin-top: 25px;
  padding: 15px 35px;
  background-color: #42b983;
  color: white;
  text-decoration: none;
  border-radius: 30px; /* 增加圆角 */
  font-size: 1.3em; /* 增加字体大小 */
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.play-button:hover {
  background-color: #369f75;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.play-button:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.movie-description-full {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.movie-description-full h2 {
  font-size: 2.2em;
  color: #2c3e50;
  margin-bottom: 20px;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

.movie-description-full p {
  line-height: 1.8;
  color: #444;
  font-size: 1.1em;
}

.comment-section {
  margin-top: 40px;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.comment-section h3 {
  font-size: 2em;
  color: #2c3e50;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.comment-textarea {
  width: calc(100% - 28px); /* 调整宽度以适应 padding */
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1.1em;
  resize: vertical;
  min-height: 120px;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.06);
}

.comment-textarea:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 123, 255, 0.25);
}

.submit-comment-button {
  padding: 14px 30px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1.2em;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.submit-comment-button:hover {
  background-color: #0056b3;
  transform: translateY(-3px);
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.2);
}

.submit-comment-button:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.success-message {
  color: #28a745;
  margin-top: 20px;
  font-weight: bold;
  font-size: 1.1em;
}

.error-message {
  color: #dc3545;
  margin-top: 20px;
  font-weight: bold;
  font-size: 1.1em;
}

.comments-title {
  margin-top: 40px;
  font-size: 2em;
  color: #2c3e50;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.comment-item {
  background-color: #f0f2f5;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.comment-item:hover {
  background-color: #e6e8eb;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  font-size: 1em;
  color: #777;
  margin-bottom: 12px;
  border-bottom: 1px dashed #dcdcdc;
  padding-bottom: 8px;
}

.comment-author {
  font-weight: bold;
  color: #333;
}

.comment-date {
  color: #888;
}

.comment-body {
  font-size: 1.1em;
  color: #444;
  line-height: 1.7;
}

/* 响应式设计 */
@media (min-width: 768px) {
  .movie-header {
    flex-direction: row;
    text-align: left;
  }

  .movie-image {
    margin-right: 40px;
  }

  .movie-meta {
    text-align: left;
  }
}

@media (max-width: 767px) {
  .movie-title {
    font-size: 2.5em;
  }

  .movie-detail-container {
    padding: 20px;
    margin: 20px auto;
  }

  .movie-image {
    max-width: 300px;
  }

  .play-button,
  .submit-comment-button {
    padding: 12px 25px;
    font-size: 1.1em;
  }

  .back-button {
    top: 20px;
    left: 20px;
    padding: 10px 15px;
    font-size: 0.9em;
  }

  .movie-content {
    padding-top: 50px;
  }

  .comment-textarea {
    width: calc(100% - 24px);
  }
}

@media (max-width: 480px) {
  .movie-title {
    font-size: 2em;
  }

  .movie-detail-container {
    padding: 15px;
    margin: 15px auto;
  }

  .movie-image {
    max-width: 250px;
  }

  .play-button,
  .submit-comment-button {
    padding: 10px 20px;
    font-size: 1em;
  }

  .back-button {
    top: 15px;
    left: 15px;
    padding: 8px 12px;
    font-size: 0.8em;
  }

  .movie-content {
    padding-top: 40px;
  }

  .movie-header,
  .movie-description-full,
  .comment-section {
    padding: 20px;
  }

  .comment-textarea {
    min-height: 100px;
  }
}
</style>